<template>
	<a-popover placement="rightBottom" trigger="click">
		<template slot="title">
			<span class="font-weight-bold">自定义列</span>
		</template>
		<template slot="content">
			<a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
				<a-row class="a-popover" v-if="colName=='2'">
					<template v-for="(item,index) in defColumns_" >
						<template v-if="!ignoreColumns.includes(item.key) && !ignoreColumns.includes(item.dataIndex)">
							<a-col :span="12" class="pb">
								<a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox>
							</a-col>
						</template>
					</template>
					<!-- <a-col :span="12" v-for="(item,index) in defColumns_" class="pb">
						<a-checkbox :value="item.dataIndex">
							{{item.title}}
						</a-checkbox>
					</a-col> -->
					
				</a-row>
				<a-row class="a-popover4" v-if="colName=='4'">
					<template v-for="(item,index) in defColumns_" >
						<template v-if="!ignoreColumns.includes(item.key) && !ignoreColumns.includes(item.dataIndex)">
							<a-col :span="6" class="pb">
								<a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox>
							</a-col>
						</template>
					</template>
				</a-row>
				<a-row class="a-popover3" v-if="colName=='3'">
					<template v-for="(item,index) in defColumns_" >
						<template v-if="!ignoreColumns.includes(item.key) && !ignoreColumns.includes(item.dataIndex)">
							<a-col :span="8" class="pb">
								<a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox>
							</a-col>
						</template>
					</template>
				</a-row>
			</a-checkbox-group>
		</template>
		<div class="flex align-center cursor-pointer " @click="click_custom()">
			<a-icon type="setting" class="font16" />
			<span class="ml-1 font">自定义列</span>
		</div>
	</a-popover>
</template>

<script>
	export default {
		name: "ListColumnsSetter",

		props: {
			columns: {
				type: Array,
				required: true
			},
			defColumns: {
				type: Array,
				required: true
			},
			ignoreColumns: {
				type: Array,
				default: () => ['rowIndex']
			},
			listName: {
				type: String,
				default: '',
			},
			colName: {
				type: String,
				default: '2',
			}
		},

		model: {
			prop: 'columns',
			event: 'change'
		},

		data() {
			return {
				defColumns_: [],
				settingColumns: [],
				clicked: false,
				colNum: ''
			}
		},
		mounted() {
			this.defColumns_.push(...this.defColumns);
			this.initColumns();
		},
		methods: {
			initColumns() {
				let columns = [];
				let allSettingColumns = [];
				this.defColumns_.forEach((item, i, array) => {
					allSettingColumns.push(item.dataIndex);
				});
				this.settingColumns = allSettingColumns;
				columns = this.defColumns_;
				this.$emit('change', columns);
			},

			//列设置更改事件
			onColSettingsChange(checkedValues) {
				this.settingColumns = checkedValues;
				const columns = this.defColumns_.filter(item => {
					if (this.ignoreColumns.includes(item.key) || this.ignoreColumns.includes(item.dataIndex)) {
						return true
					}
					if (this.settingColumns.includes(item.dataIndex)) {
						return true
					}
					return false
				})
				this.$emit('change', columns);
			},
			//自定义列
			click_custom() {
				this.clicked = !this.clicked;
			},
		},

	}
</script>
<style scoped="scoped">
	.a-popover {
		width: 250px;
	}
	.a-popover3{
		width: 375px;
	}
	.a-popover4 {
		width: 500px;
	}
</style>
